<template>
  <el-button class="login_button" type="primary" @click="handleClick">
    {{ buttonText }}
  </el-button>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps<{
  buttonText: string;
}>();

const router = useRouter();

const handleClick = () => {
  router.push({ name: 'Login' });
};
</script>


<style scoped>
.login_button {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  font-size: 25px !important;
  min-width: 100px !important;
  height: 60px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-right: 30px;
  text-shadow: 0 0 5px #000000, 0 0 10px #ffffff, 0 0 20px #000000;
}

.login_button:hover {
  color: #000000 !important;
  border-color: transparent !important;
}
</style>
